<template>
  <div style="background-color: rgba(255, 255, 255, 1); height: 100%">
    <header>
      <Row type="flex" justify="space-between">
        <Col span="24">
          <Row type="flex" justify="start">
            <Icon type="md-photos" color="#ccc" size="70" />
            <div class="home-user">
              <span>
                <h3 style="margin-right: 15px">
                  {{ bloc.deviceId.modelName[0] }}
                </h3>
                <div>设备状态：</div>
                <div class="circle"></div>
                <p>{{ deviceStatusList[bloc.deviceId.statusCode] }}</p>
              </span>
              <span>
                <p style="margin-right: 15px">
                  设备类型：{{ $route.query.fenlei }}
                </p>
                <p style="margin-right: 15px">
                  设备编号：{{ bloc.deviceId.deviceSn }}
                </p>
                <p style="margin-right: 15px">
                  经销商：{{ $route.query.shoper }}
                </p>
                <p style="margin-right: 15px">
                  所属地区：{{ $route.query.address }}
                </p>
                <p style="margin-right: 15px">
                  颜色：{{ $route.query.color }}
                </p>
                <p>型号：{{ $route.query.xinghao }}</p>
              </span>
            </div>
          </Row>
        </Col>
        <!--        <Col span="4">-->
        <!--          <Row type="flex" class="user-device-box justify="space-between" align="middle">-->
        <!--            <div>-->
        <!--              <Button icon="md-create" @click="add=true" style="margin-right:30px">编辑产品</Button>-->
        <!--            </div>-->
        <!--            <div>-->
        <!--              <Button icon="ios-trash" @click="batchDelete=true">删除产品</Button>-->
        <!--            </div>-->
        <!--          </Row>-->
        <!--        </Col>-->
      </Row>
    </header>

    <div class="nav">
      <h3 :class="{ active: selectType === 1 }" @click="selectType = 1">
        使用日志
      </h3>
      <h3
        style="padding-left: 20px"
        :class="{ active: selectType === 2 }"
        @click="selectType = 2"
      >
        关联用户
      </h3>
      <h3 :class="{ active: selectType === 3 }" @click="selectType = 3">
        维保记录
      </h3>
      <h3 :class="{ active: selectType === 4 }" @click="selectType = 4">
        在线程序
      </h3>
      <h3 :class="{ active: selectType === 5 }" @click="selectType = 5">
        销售记录
      </h3>
      <h3 :class="{ active: selectType === 6 }" @click="selectType = 6">
        设备健康
      </h3>
    </div>
    <div class="top" v-show="selectType === 1">
      <Row type="flex" justify="center" style="margin: 10px">
        <DatePicker
          type="daterange"
          placeholder="使用时间"
          format="yyyy/MM"
          v-model="bloc.dateDeviceUsage"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getData()"
          >查询
        </Button>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 33.3%"
        :gutter="50"
      >
        <div
          id="myChart"
          :style="{ width: '100%', height: '100%', 'min-width': '300px' }"
        ></div>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px; height: 33.3%"
        :gutter="25"
      >
        <Col span="24">
          <chart-bar-axis
            style="height: 100%; margin: 0px; width: 200%; border: none"
            :value="bloc.ModeUseNumVo"
          />
        </Col>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px; height: 33.3%"
        :gutter="25"
      >
        <Col span="24">
          <chart-bar-axis
            style="height: 100%; margin: 0px; width: 200%; border: none"
            :value="bloc.ModeLifetimeVo"
          />
        </Col>
      </Row>
    </div>
    <div class="bottom">
      <Table
        border
        :columns="tableData2.columns4"
        :data="bloc.deviceUse.items"
        v-if="selectType === 1"
      >
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.deviceUse.itemCount"
            :current="bloc.deviceUse.pageIndex"
            :page-size="bloc.deviceUse.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="
              val =>
                bloc.getDeviceUse(
                  val,
                  bloc.deviceUse.pageSize,
                  'DESC',
                  bloc.company.id,
                  idx()
                )
            "
            @on-page-size-change="
              val => {
                bloc.deviceUse.pageSize = val;
                bloc.getDeviceUse(1, val, 'DESC', bloc.company.id, idx());
              }
            "
          />
        </slot>
      </Table>
      <Table
        border
        ref="selection"
        :columns="tableData1.columns4"
        :data="tableData1.data1"
        v-if="selectType === 2"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button size="small" @click="updateMark(row)" type="info">
              修改标记
            </Button>
            <!-- <Button size="small" type="warning">
              删除
            </Button> -->
          </div>
        </template>
      </Table>
      <!-- <tables :tableData="tableData1" v-if="selectType === 2"></tables> -->
      <tables :tableData="tableData3" v-if="selectType === 3"></tables>
      <tables :tableData="tableData4" v-if="selectType === 4"></tables>
      <div class="top5" v-show="selectType === 5">
        <Form
          ref="formValidateUpdate"
          :rules="ruleValidate"
          :model="data5"
          :label-width="80"
        >
          <Divider orientation="left">客户信息</Divider>
          <FormItem label="购买日期" prop="buyTime" required>
            <DatePicker
              style="width: 100%"
              type="date"
              placeholder="请选择"
              v-model="data5.buyTime"
            ></DatePicker>
          </FormItem>
          <FormItem label="姓名" prop="customPhone" required>
            <Input v-model="data5.customPhone" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="手机号" prop="customName" required>
            <Input
              v-model="data5.customName"
              placeholder="请输入"
              maxlength="11"
            ></Input>
          </FormItem>
          <FormItem label="地址" prop="address">
            <Input v-model="data5.address" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="保修时间">
            <Row>
              <Col span="11">
                <FormItem prop="startTime">
                  <DatePicker
                    style="width: 100%"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    placeholder="开始时间"
                    v-model="data5.startTime"
                  ></DatePicker>
                </FormItem>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <FormItem prop="endTime">
                  <DatePicker
                    style="width: 100%"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    placeholder="结束时间"
                    v-model="data5.endTime"
                  ></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </FormItem>
          <Divider orientation="left">导购信息</Divider>
          <FormItem label="姓名" prop="salesName">
            <Input v-model="data5.salesName" placeholder="请输入"></Input>
          </FormItem>
          <FormItem label="手机号" prop="salesPhone">
            <Input
              v-model="data5.salesPhone"
              placeholder="请输入"
              maxlength="11"
            ></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidateUpdate')"
              >保存</Button
            >
          </FormItem>
        </Form>
      </div>
      <div class="maincopy" v-show="selectType === 6">
        <div class="headercopy">
          <Button
            type="primary"
            icon="md-add"
            style="margin: 0 10px 0 0"
            @click="addComponent"
            size="default"
            >新增部件
          </Button>
          <Input
            class="searchId"
            type="text"
            placeholder="请输入设备编号"
            maxlength="16"
            v-model="searchValue"
          />
          <Button
            type="primary"
            icon="ios-search"
            style="margin: 0 10px"
            @click="searchData"
            size="default"
            >查询
          </Button>
          <Button
            icon="md-refresh"
            @click="resetValue"
            style="margin-right: 10px"
            size="default"
            >重置</Button
          >
        </div>
        <div style="height: 10px;"></div>
        <div class="toolbar component_name">
          <div class="" v-for="item in List2" :key="item.componentName">
            <i-circle
              :percent="item.percentage"
              :size="60"
              :stroke-width="8"
              :stroke-color="
                item.percentage >= 95
                  ? 'rgb(230, 0, 18)'
                  : item.percentage >= 90
                  ? 'rgb(255, 241, 0)'
                  : 'rgb(0, 255, 255)'
              "
            >
              <span class="demo-Circle-inner" style="font-size: 14px"
                >{{ item.percentage }}%</span
              >
            </i-circle>
            <div>
              <div>{{ item.componentName }}</div>
              <div>{{ item.expirationMonth }}</div>
            </div>
          </div>
        </div>
        <div class="table">
          <Table border :columns="columns" :data="data" max-height="520">
            <template #lastMaintenanceDate="{ row }">
              <span>{{
                row.lastMaintenanceDate ? row.lastMaintenanceDate : "暂无记录"
              }}</span>
            </template>
            <template #operator="{ row }">
              <span>{{
                row.lastMaintenanceDate ? row.operator : "暂无记录"
              }}</span>
            </template>
            <template #usageDuration="{ row }">
              <span
                >{{
                  Math.ceil(
                    Number(row.usageDuration - Number(row.usageDurationOld)) /
                      60
                  )
                }}/小时</span
              >
            </template>
            <template #usageTime="{ row }">
              <span>{{ row.usageTime }}/小时</span>
            </template>
            <template #warranty="{ row }">
              <span>{{ row.warranty }}/月</span>
            </template>

            <template #action="{ row, index }">
              <Button
                type="primary"
                size="small"
                @click="editData(row)"
                style="margin-right: 5px"
                >编辑</Button
              >
              <Button size="small" @click="resetData(row.id)">重置</Button>
              <Button type="error" size="small" @click="deleteData(row.id)"
                >删除</Button
              >
            </template>
          </Table>
        </div>
      </div>
      <div style="margin-top: 20px" v-show="selectType === 1"></div>
    </div>

    <Modal
      title="编辑设备"
      v-model="add"
      class-name="vertical-center-modal"
      @on-ok="add"
    >
      <p slot="header">
        <span>新增设备</span>
      </p>
      <div style="text-align: center">
        <Form label-position="right" :label-width="100">
          <FormItem label="设备类型：" v-model="deviceType">
            <p style="text-align: left">{{ deviceType }}</p>
          </FormItem>
          <FormItem label="设备型号：" v-model="deviceSize">
            <p style="text-align: left">{{ deviceSize }}</p>
          </FormItem>
          <FormItem label="所属品牌商：" v-model="customer">
            <p style="text-align: left">{{ customer }}</p>
          </FormItem>
          <FormItem label="设备编号:" required>
            <Input v-model="deviceSn"></Input>
          </FormItem>
        </Form>
      </div>
    </Modal>

    <Modal
      title="确认提示"
      v-model="batchDelete"
      class-name="vertical-center-modal"
      @on-ok="batchDeleteAction(false)"
    >
      <div>
        <span>
          <h2>
            <Icon
              type="ios-help-circle-outline"
              size="48"
              color="rgba(255, 209, 145, 1)"
            />是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left: 45px">是否确定删除对应的记录</p>
      </div>
    </Modal>
    <Modal v-model="modal" title="新增部件" :footer-hide="true">
      <Space direction="vertical" size="large">
        <Space style="display: block; margin-top: 20px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />标识符：</span
          >
          <Input v-model="code" style="width: 300px" />
          <span class="hidden" v-show="!code && firstShow">标识符不能为空</span>
        </Space>
        <Space style="display: block; margin-top: 20px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />部件名称：</span
          >
          <Input v-model="componentNa" style="width: 300px" />
          <span class="hidden" v-show="!componentNa && firstShow"
            >部件名称不能为空</span
          >
        </Space>
        <Space style="display: block; margin-top: 10px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />部件时长上限：</span
          >
          <Input v-model="usageTi" style="width: 300px" />
          <span class="hidden" v-show="!usageTi && firstShow"
            >部件使用时长上限不能为空不能为0</span
          >
        </Space>
        <!-- <Space style="display: block; margin-top: 10px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              style="margin-right: 2px"
              color="red"
            />质保时间：</span
          >
          <Input v-model="warran" style="width: 300px" />
          <span class="hidden" v-show="!warran && firstShow"
            >质保时间不能为空不能为0</span
          >
        </Space> -->
      </Space>
      <div style="margin-top: 40px; display: flex; justify-content: center">
        <Button style="width: 100px; height: 40px" @click="cancel()"
          >返回</Button
        >
        <Button
          style="margin-left: 60px; width: 100px; height: 40px"
          type="primary"
          @click="ok()"
          >保存
        </Button>
      </div>
    </Modal>
    <Modal v-model="editModal" title="编辑部件" :footer-hide="true">
      <Space direction="vertical" size="large">
        <Space style="display: block; margin-top: 20px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />标识符：</span
          >
          <Input v-model="editcode" style="width: 300px" />
          <span class="hidden" v-show="!editcode && firstShow"
            >标识符不能为空</span
          >
        </Space>
        <Space style="display: block; margin-top: 20px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />部件名称：</span
          >
          <Input v-model="componentNae" style="width: 300px" />
          <span class="hidden" v-show="!componentNae">部件名称不能为空</span>
        </Space>
        <!-- <Space style="display: block; margin-top: 10px">
          <span style="display: inline-block; width: 120px">部件描述：</span>
          <Input v-model="descriptio" type="textarea" style="width: 300px" />
          <span class="hidden" v-show="!descriptio">部件描述不能为空</span>
        </Space> -->
        <Space style="display: block; margin-top: 10px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />部件时长上限：</span
          >
          <Input v-model="usageTie" style="width: 300px" />
          <span class="hidden" v-show="!usageTie"
            >部件使用时长上限不能为空不能为0</span
          >
        </Space>
        <!-- <Space style="display: block; margin-top: 10px">
          <span style="display: inline-block; width: 120px"
            ><Icon
              type="ios-medical-outline"
              color="red"
              style="margin-right: 2px"
            />质保时间：</span
          >
          <Input v-model="warrane" style="width: 300px" />
          <span class="hidden" v-show="!warrane">质保时间不能为空不能为0</span>
        </Space> -->
      </Space>
      <div style="margin-top: 40px; display: flex; justify-content: center">
        <Button style="width: 100px; height: 40px" @click="cancel2()"
          >返回</Button
        >
        <Button
          style="margin-left: 60px; width: 100px; height: 40px"
          type="primary"
          @click="ok2()"
          >保存
        </Button>
      </div>
    </Modal>
    <Modal v-model="deletemodal" title="删除" @on-ok="ok1" @on-cancel="cancel1">
      <p>是否要删除这条数据</p>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ChartBarAxis } from "@/component/charts";
import tables from "./Tables.vue";
import { DevicesBloc } from "./DevicesBloc";
import { formatDate } from "@/base/util/Dates";
import { Row } from "view-design";
import {
  findByDeviceSn,
  addDeviceSn,
  deleteData,
  putData,
  resetData,
  sreachData
} from "@/base/api/ComponentApi";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

@Component({
  components: { tables, ChartBarAxis }
})
export default class extends Vue {
  bloc = new DevicesBloc();
  deviceStatusList: any = {
    ONLINE: "在线",
    OFFLINE: "离线",
    AWAIT: "待机",
    WORKING: "使用中",
    ERROR: "故障"
  };
  componentNa: string = "";
  descriptio: string = "";
  usageTi: string = "";
  searchValue: string = "";
  warran: string = "";
  code: string = "";
  editcode: string = "";
  createTIme: string = "";
  componentNae: string = "";
  usageTie: number = 0;
  modelIdEdit: number = 0;
  deviceSnEdit: string = "";
  warrane: number = 0;
  selectType: any = 1;
  editId: number = 0;
  deletemodal: boolean = false;
  deleteID: string = "";
  modal: boolean = false;
  add: boolean = false;
  editModal: boolean = false;
  batchDelete: boolean = false;
  deviceType: any = "按摩椅";
  deviceSize: any = "a1003";
  customer: any = "苏大强";
  deviceSn: any = "123";
  firstShow: boolean = true;
  tableData1: any = {
    name: "关联用户",
    columns4: [
      {
        title: "手机号码",
        key: "phone"
      },
      {
        title: "userID",
        key: "id"
      },
      {
        title: "绑定时间",
        key: "created"
      },
      {
        title: "标记",
        key: "mark"
      },
      {
        title: "操作",
        key: "action",
        width: 150,
        align: "center",
        slot: "action",
        fixed: "right"
      }
    ],
    data1: [
      {
        phone: "001",
        userID: "CP001",
        bindTime: "经销商名称"
      },
      {
        phone: "001",
        userID: "CP001",
        bindTime: "经销商名称"
      },
      {
        phone: "001",
        userID: "CP001",
        bindTime: "经销商名称"
      },
      {
        phone: "001",
        userID: "CP001",
        bindTime: "经销商名称"
      }
    ]
  };
  tableData2: any = {
    name: "设备使用日志",
    columns4: [
      {
        title: "ID",
        key: "id",
        tooltip: true
      },
      {
        title: "手机号码",
        key: "phone",
        tooltip: true
      },
      {
        title: "成员",
        key: "nickname",
        tooltip: true
      },
      {
        title: "自动模式",
        key: "modeName",
        render: (h: any, params: any) => {
          return h("span", {
            domProps: {
              innerText: params.row.selfMotion
                ? params.row.selfMotion
                : params.row.modeName
            }
          });
        },
        tooltip: true
      },
      {
        title: "使用时长(分)",
        key: "lifetime",
        render: (h: any, params: any) => {
          return h("span", {
            domProps: {
              innerText: Math.floor(params.row.lifetime / 60)
            }
          });
        },
        tooltip: true
      },
      // {
      //   title: '更新时间',
      //   key: 'updated',
      //   slot: 'updated',
      //   tooltip: true,
      //   width: 150
      // },
      {
        title: "创建时间",
        key: "created",
        tooltip: true,
        width: 160
      },
      {
        title: "操作",
        key: "action",
        width: 47 * 1 + 61 * 0 + 75 * 0 + 20,
        align: "center",
        slot: "action",
        fixed: "right"
      }
    ],
    data1: []
  };
  tableData3: any = {
    name: "故障记录",
    columns4: [
      {
        title: "ID",
        key: "id",
        tooltip: true,
        width: 200
      },
      {
        title: "故障时间",
        key: "created",
        slot: "created"
      },
      {
        title: "故障类型",
        key: "faultType"
      },
      {
        title: "故障描述",
        key: "describe"
      },
      {
        title: "状态",
        key: "fixed",
        render: (h: any, params: any) => {
          return h("span", {
            domProps: {
              innerText: params.row.fixed ? "已修复" : "待修复"
            }
          });
        },
        tooltip: true
      },
      {
        title: "更新时间",
        key: "updated"
      },
      {
        title: "操作",
        key: "action",
        width: 47 * 1 + 61 * 0 + 75 * 0 + 20,
        align: "center",
        slot: "action",
        fixed: "right"
      }
    ],
    data1: []
  };

  tableData4: any = {
    name: "在线程序",
    columns4: [
      {
        title: "ID",
        key: "accountId",
        tooltip: true,
        width: 200
      },
      {
        title: "ID",
        key: "accountId",
        tooltip: true,
        width: 200
      },
      {
        title: "模式名称",
        key: "modeName",
        tooltip: true,
        width: 200
      },
      {
        title: "模式编号",
        key: "sn",
        tooltip: true,
        width: 100
      },
      {
        title: "描述",
        key: "describe",
        tooltip: false
      }
    ],
    data1: []
  };
  data5: any = {
    id: 0,
    buyTime: "",
    deviceId: 0,
    customName: "",
    customPhone: "",
    address: "",
    startTime: "",
    endTime: "",
    salesName: "",
    salesPhone: ""
  };
  columns: any = [
    {
      title: "id",
      key: "id",
      width: 200
    },
    {
      title: "部件名称",
      key: "componentName",
      width: 200
    },
    // {
    //   title: '标识符',
    //   key: 'code',
    //   width: 200
    // },
    // {
    //   title: '设备编号',
    //   key: 'deviceSn',
    //   width: 200
    // },
    {
      title: "部件的使用时长",
      slot: "usageDuration",
      width: 200
    },
    {
      title: "部件使用时长上限",
      slot: "usageTime",
      width: 200
    },
    // {
    //   title: '质保时间',
    //   slot: 'warranty',
    //   width: 200
    // },
    {
      title: "创建时间",
      key: "created",
      width: 200
    },
    {
      title: "更新时间",
      key: "updated",
      width: 200
    },
    {
      title: "最后维护日期",
      slot: "lastMaintenanceDate",
      width: 200
    },
    {
      title: "重置人",
      slot: "operator",
      width: 200
    },

    {
      title: "操作",
      slot: "action",
      width: 200,
      align: "center",
      fixed: "right"
    }
  ];
  data: any = [
    {
      id: 1,
      updated: "384923=4324",
      created: "78324-423",
      usageTime: 0,
      warranty: 0,
      deviceSn: "djask",
      modelId: "7213712983"
    }
  ];

  batchDeleteAction(nodesc) {
    if (nodesc === true) {
      this.$Message.success("设备删除成功");
    } else {
      this.$Message.error("设备删除失败");
    }
  }

  List: any = { sortList: "", modelList: "", agentList: "" };
  List2: any = [];

  queryDeviceDetail() {
    this.bloc
      .getDeviceUse(
        this.bloc.angent.pageIndex,
        this.bloc.angent.pageSize,
        "DESC",
        this.bloc.company.id,
        this.$route.params.id
      )
      .then(res => {
        this.tableData2.data1 = this.bloc.DeviceUse.items;
      });
    this.bloc.getDeviceUseModelLifetime(
      Number(this.$route.params.id),
      this.bloc.company.id
    );
    this.bloc
      .getDeviceUseModeUse(Number(this.$route.params.id), this.bloc.company.id)
      .then(res => {
        this.bloc.ModeUseNumVo = res;
      });
    this.bloc
      .getAllAngent(
        this.bloc.angent.pageIndex,
        this.bloc.angent.pageSize,
        "DESC"
      )
      .then(res => {
        this.List.agentList = res;
        this.bloc
          .getAllSort(
            this.bloc.angent.pageIndex,
            this.bloc.angent.pageSize,
            "DESC"
          )
          .then(res => {
            this.List.sortList = res;
            let id = Number(this.$route.params.id);
            this.bloc.toModifyItem(id).then(res => {
              this.getData();
              this.bloc
                .getAllModel(
                  this.bloc.angent.pageIndex,
                  this.bloc.angent.pageSize,
                  res.sortId,
                  "DESC",
                  undefined
                )
                .then(res => {
                  this.List.modelList = res;
                  this.bloc.deviceId.agentName = this.List.agentList.map(
                    agent => {
                      if (agent.id === this.bloc.deviceId.agentId) {
                        return agent.agentName;
                      }
                    }
                  );
                  this.bloc.deviceId.sortName = this.List.sortList.map(sort => {
                    if (sort.id === this.bloc.deviceId.sortId) {
                      return sort.sortName;
                    }
                  });
                  this.bloc.deviceId.modelName = this.List.modelList.map(
                    model => {
                      if (model.id === this.bloc.deviceId.modelId) {
                        return model.modelName;
                      }
                    }
                  );
                  this.bloc
                    .getModelSelfMotionDownloadedByDeviceSn(
                      this.bloc.deviceId.deviceSn
                    )
                    .then(res => {
                      this.tableData4.data1 = this.bloc.SeftMotion;
                    });
                });
            });
            this.bloc.getDeviceMember(id).then(res => {
              this.tableData1.data1 = res;
            });
            this.bloc
              .getDeviceFault(1, 10, "DESC", this.$route.params.id)
              .then(res => {
                this.tableData3.data1 = this.bloc.DeviceFault.items;
              });
          });
      });
    this.bloc.selectByDeviceId(this.idx()).then(res => {
      this.data5 = res.data;
    });
    console.log("this.$route.params", this.$route.query.data);
    let deviceSn: any = this.$route.query.data;
    this.bloc.getMaintenanceTips(deviceSn).then(res => {
      this.List2 = res.data;
      // 去除按摩椅名称的显示
      this.List2 = this.List2.filter(item => {
        return item.code != "totaltime";
      });
    });
  }

  idx() {
    return Number(this.$route.params.id);
  }

  activated() {
    this.queryDeviceDetail();
  }
  async getData() {
    let myChart = echarts.init(document.getElementById("myChart"));
    myChart.showLoading();
    await this.bloc.getDeviceUsage();
    myChart.setOption(this.bloc.optionsDeviceUsage);
    myChart.hideLoading();
  }

  updateMark(item) {
    this.bloc.updateMark(this.idx(), item.id).then(res => {
      this.bloc.getDeviceMember(this.idx()).then(res => {
        this.tableData1.data1 = res;
      });
    });
  }

  $refs!: {
    formValidateUpdate: HTMLFormElement;
  };
  ruleValidate: any = {
    buyTime: [
      {
        required: true,
        message: "购买日期不能为空",
        trigger: "change",
        type: "date"
      }
    ],
    customPhone: [
      { required: true, message: "客户姓名不能为空", trigger: "blur" }
    ],
    customName: [
      { required: true, message: "客户手机不能为空", trigger: "blur" }
    ]
  };
  // 销售记录
  handleSubmit(name: string) {
    this.$refs[name].validate(valid => {
      if (valid) {
        this.data5.deviceId = this.idx();
        if (this.data5.buyTime) {
          this.data5.buyTime = formatDate(
            new Date(this.data5.buyTime),
            "yyyy-MM-dd hh:mm:ss"
          );
        }
        if (this.data5.startTime) {
          this.data5.startTime = formatDate(
            new Date(this.data5.startTime),
            "yyyy-MM-dd hh:mm:ss"
          );
        }
        if (this.data5.endTime) {
          this.data5.endTime = formatDate(
            new Date(this.data5.endTime),
            "yyyy-MM-dd hh:mm:ss"
          );
        }
        this.bloc
          .postSalesRecords(this.data5)
          .then(res => {
            this.$Message.success("修改成功!");
          })
          .catch(err => {
            this.$Message.error(err.message);
          });
      }
    });
  }
  // 查询部件状态
  findByDeviceSn() {
    findByDeviceSn(String(this.$route.query.data)).then(res => {
      this.data = [];
      this.data = res.data;
      this.data = this.data.filter(item => {
        return item.code != "totaltime";
      });
    });
  }
  // 编辑数据
  editData(data) {
    this.componentNae = data.componentName;
    this.usageTie = data.usageTime;
    this.warrane = data.warranty;
    this.editModal = true;
    this.editId = data.id;
    this.deviceSnEdit = data.deviceSn;
    this.createTIme = data.created;
    this.modelIdEdit = data.modelId;
    this.editcode = data.code;
  }
  // 取消编辑
  cancel2() {
    this.editModal = false;
  }
  // 查询数据
  searchData() {
    sreachData(this.searchValue).then(res => {
      this.data = [];
      this.data = res.data;
    });
  }
  // 重置数据
  resetValue() {
    this.searchValue = "";
    this.findByDeviceSn();
  }
  // 保存编辑
  ok2() {
    if (this.componentNae && this.usageTie && this.warrane) {
      putData({
        componentName: this.componentNae,
        modelId: Number(this.modelIdEdit) || 0,
        usageTime: Number(this.usageTie),
        warranty: Number(this.warrane),
        deviceSn: this.deviceSnEdit,
        id: Number(this.editId),
        created: this.createTIme,
        code: Number(this.editcode)
      })
        .then(res => {
          console.log(res);
          this.$message.success("修改成功");
        })
        .finally(() => {
          this.editModal = false;
          this.findByDeviceSn();
        });
    } else {
      // this.$message.error("编辑数据不完整");
    }
  }
  // 确认新增部件
  ok() {
    if (this.componentNa && this.usageTi && this.warran) {
      this.firstShow = false;
      addDeviceSn({
        code: Number(this.code),
        componentName: this.componentNa,
        modelId: Number(this.$route.params.id) || 0,
        usageTime: Number(this.usageTi),
        warranty: Number(this.warran),
        deviceSn: String(this.$route.query.data) || ""
      })
        .then(res => {
          this.$Message.success("新增成功");
          this.findByDeviceSn();
        })
        .finally(() => {
          this.modal = false;
          this.componentNa = "";
          this.usageTi = "";
          this.warran = "";
          this.code = "";
        });
    } else {
      // this.$message.error("请输入完整信息");
      this.firstShow = true;
    }
  }
  // 取消新增配件
  cancel() {
    this.modal = false;
    // this.firstShow = false
  }
  // 点击新增配件
  addComponent() {
    this.modal = true;
    this.firstShow = false;
  }
  // 删除配件数据
  deleteData(id) {
    this.deleteID = id;
    this.deletemodal = true;
  }
  // 重置配件数据
  resetData(id) {
    resetData(id).then(res => {
      console.log(res);
      this.findByDeviceSn();
      this.$Message.success("重置成功");
    });
  }
  ok1() {
    deleteData(this.deleteID)
      .then(res => {
        this.findByDeviceSn();
        this.$Message.success("删除成功");
      })
      .finally(() => {
        this.deletemodal = false;
      });
  }
  cancel1() {
    this.deletemodal = false;
  }

  mounted() {
    console.log(this.bloc.deviceId, "dsakdjsak");
    this.queryDeviceDetail();
    this.findByDeviceSn();
  }
}
</script>
<style lang="less" scoped>
header {
  height: 140px;
  width: 100%;
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  font-size: 18px;
  padding: 25px 20px;

  .user-device-box > div {
    width: 120px;
    padding-top: 20px;
  }

  .home-user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    color: #999;
    font-size: 14px;

    span {
      padding: 5px 0;
      display: flex;

      .circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-top: 5px;
        background: green;
      }
    }
  }
}

.nav {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  display: flex;
  justify-content: flex-start;

  h3 {
    padding: 0 20px;
    cursor: pointer;
  }
}

.bottom {
  padding: 0px 30px 30px 30px;
}

.top {
  width: 100%;
  height: 1500px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
}

.active {
  border-bottom: 1px solid #559df9;
  color: #559df9;
}
.top5 {
  width: 50%;
  min-width: 500px;
  border: 1px solid rgba(242, 242, 242, 1);
  margin: 1%;
  padding: 1%;
}
.maincopy {
  margin-top: 20px;
  .headercopy {
    height: 66px;
    width: 500px;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }
  .table {
    margin-top: 20px;
    max-width: 1920px;
  }
}
.hidden {
  display: block;
  margin-left: 120px;
  font-size: 12px;
  color: red;
}
.component_name {
  display: flex;
  flex-wrap: wrap;
  > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19%;
    border: 1px solid #ddd;
    margin: 0.5%;
    border-radius: 5px;
    padding: 0 10px;
  }
}
</style>
